<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>科研项目管理系统 - 统计分析</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            padding-top: 20px;
        }
        .chart-container {
            height: 400px;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h1 class="h3">科研项目统计分析</h1>
        </div>
        <div class="card-body">
            <nav class="nav mb-4">
                <a class="nav-link" href="/project/list">项目管理</a>
                <a class="nav-link active" href="/project/stats">统计分析</a>
                <a class="nav-link" href="/college/list">学院管理</a>
            </nav>

            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">各学院项目数量统计</div>
                        <div class="card-body">
                            <div id="collegeChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">项目状态分布</div>
                        <div class="card-body">
                            <div id="statusChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 初始化图表
    const collegeChart = echarts.init(document.getElementById('collegeChart'));
    const statusChart = echarts.init(document.getElementById('statusChart'));

    // 获取各学院项目数量数据
    fetch('/project/api/stats/college')
        .then(response => response.json())
        .then(data => {
            const collegeNames = data.map(item => item.collegeName);
            const counts = data.map(item => item.count);

            const collegeOption = {
                title: {
                    text: '各学院项目数量',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: collegeNames,
                    axisLabel: {
                        interval: 0,
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '项目数量'
                },
                series: [{
                    data: counts,
                    type: 'bar',
                    itemStyle: {
                        color: '#1890ff'
                    },
                    label: {
                        show: true,
                        position: 'top'
                    }
                }]
            };
            collegeChart.setOption(collegeOption);
        });

    // 获取项目状态分布数据
    fetch('/project/api/stats/status')
        .then(response => response.json())
        .then(data => {
            // 关键：将 { statusName: "...", count: N } 转为 { name: "...", value: N }
            const pieData = data.map(item => ({
                name: item.statusName,  // 注意这里是 statusName
                value: item.count       // 注意这里是 count
            }));

            const statusOption = {
                title: {
                    text: '项目状态分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [{
                    name: '项目状态',
                    type: 'pie',
                    radius: '60%',
                    data: pieData, // 使用转换后的数据
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        formatter: '{b}: {c} ({d}%)'
                    }
                }]
            };
            statusChart.setOption(statusOption);
        })
        .catch(error => {
            console.error('加载项目状态数据失败:', error);
        });

    // 响应式处理
    window.addEventListener('resize', function() {
        collegeChart.resize();
        statusChart.resize();
    });
</script>
</body>
</html>